$bg_color: #333;
$font_color: #ffffff;
$primary_color: #008ed6;
$dark-overlay: rgba(0,0,0,0.7);
$icon-size: 30px;

body{
    background: $bg_color;
    color: $font_color;
}

.navbar{
    border-bottom: $primary_color 3px solid;
    opacity: 0.8;
}

#home-section{
    $home-section-height: 100vh;

    background: url("../img/home-section-bg.jpg") no-repeat;
    //min-height: $home-section-height;
    height: $home-section-height;
    background-size: cover;
    background-position:center;
    background-attachment: fixed;

    .dark-overlay{
        background-color: $dark-overlay;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: $home-section-height;
    }

    .home-inner{
        padding-top: $home-section-height/3.5;
    }

    .card-form{
        opacity: 0.8;
    }

    .fa{
        color: $primary_color;
        background: #ffffff;
        padding: 4px;
        border-radius: 5px;
        font-size: $icon-size;
    }
}

#explore-section{
    .fa{
        color: #fff;
        background: #333;
        padding: 4px;
        border-radius: 5px;
        font-size: $icon-size;
    }
}

#create-section{
    .fa{
        color: $primary_color;
        background: #fff;
        padding: 4px;
        border-radius: 5px;
        font-size: $icon-size;
    }
}

#share-section{
    .fa{
        color: #fff;
        background: $bg_color;
        padding: 4px;
        border-radius: 5px;
        font-size: $icon-size;
    }
}
